<template>
	<!-- 通知设置 -->
	<div class="taskNotification">
		<CommonTitle titleName="通知类型"></CommonTitle>

		<div class="tabs m-l10">
			<div class="tabs_title d-flex">
				<div
					v-for="(v, i) in tabsList"
					:key="i"
					class="tabs_t_item"
					:class="v.id == tabsId ? 'tabs_t_itemHover' : ''"
					@click="tabsId = v.id"
				>
					{{ v.name }}
				</div>
			</div>

			<div class="tabs_conten">
				<!-- 督办任务 -->
				<notice-type
					v-if="tabsId == 1"
					ref="tabsFormList"
					type="1"
					v-model:formList="state.tabsFormList"
				></notice-type>

				<!-- 前置后置节点警告 -->
				<notice-type
					v-if="tabsId == 2"
					ref="tabsFormList"
					type="2"
					v-model:formList="state.tabsFormList"
				></notice-type>
			</div>
		</div>
		<div class="d-flex a-center j-center">
			<el-button class="button_view m-t20" @click="submitHandel">提交</el-button>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import NoticeType from "@/views/investmentProjectManagement/taskNotification/components/NoticeType.vue";
import { notificationApi } from "@/api/investment";
import { ElMessage } from "element-plus";
const state = reactive({
	tabsFormList: [],
});
const tabsId = ref("1");
watch(
	() => tabsId.value,
	(value) => {
		getConfig(value);
	}
);

const tabsList = ref([
	{ name: "督办任务", id: "1" },
	{ name: "前置后置节点警告", id: "2" },
]);

const handleTabsTitle = () => {};

const tabsFormList = ref(null);

const getConfig = (type) => {
	notificationApi.getConfig(type).then((res) => {
		if (res.code == 200) {
			state.tabsFormList = res.data;
			if (res.data.length == 0) {
				state.tabsFormList = [];
			} else {
				state.tabsFormList = res.data.map((v) => {
					v.taskNotification = v.noticeObjects?.split(",");
					// v.taskNotification = v.taskNotification?.map((v) => {
					// 	return Number(v);
					// });
					return {
						...v,
					};
				});
				console.log(state.tabsFormList);
			}
		}
	});
};

const saveConfig = (param) => {
	notificationApi.saveConfig(param).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功");
		}
	});
};

const submitHandel = () => {
	const arr2 = JSON.parse(JSON.stringify(tabsFormList.value.getArr()));
	const arr = arr2.map((v) => {
		v.noticeObjects = v.taskNotification.join(",");
		// v.taskNotification = null;
		return {
			...v,
		};
	});
	saveConfig(arr);
};

onMounted(() => {
	getConfig("1");
});
</script>
<style lang="scss" scoped>
.taskNotification {
	.tabs {
		.tabs_title {
			.tabs_t_item {
				font-size: 14px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				margin-right: 64px;
				cursor: pointer;
			}
			.tabs_t_itemHover {
				color: #fc7018;
				border-bottom: 1px solid #fc7018;
			}
		}

		.tabs_conten {
			margin-top: 30px;
			min-height: 147px;
			border-radius: 10px;
			border: 1px solid #e3e7f1;
			padding: 34px 0 34px 90px;
		}
	}
}
</style>
